import React from 'react';
import { Image,View, Text,StyleSheet, } from 'react-native';
import { TabBar } from 'antd-mobile-rn';
import tool from '../utils/tool';
import theme from '../theme';

export default class Footer extends React.Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: props.selectedTab ? props.selectedTab : 'Home',//选择TabBar.Item
        };
    }

    componentDidMount() {

    }

    //组件卸载
    componentWillUnmount() {

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            selectedTab: nextProps.selectedTab ? nextProps.selectedTab : 'Home',//选择TabBar.Item
        });
    }

    render() {
        const {dispatch} = this.props;

        return (
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="#ddddde"
                    //noRenderContent={true}
                    //tabBarPosition={'bottom'}
                    //prerenderingSiblingsNumber={0}
                >
                    <TabBar.Item
                        title="首页"
                        key="Home"
                        icon={require('../../static/imgs/home.png')}
                        selectedIcon={require('../../static/imgs/home.png')}
                        selected={this.state.selectedTab === 'Home'}
                        onPress={() => {
                            this.props.navigation.navigate('Home');
                        }}
                    />
                    <TabBar.Item
                        icon={require('../../static/imgs/video.png')}
                        selectedIcon={require('../../static/imgs/video.png')}
                        title="视频"
                        key="Video"
                        selected={this.state.selectedTab === 'Video'}
                        onPress={() => {
                            this.props.navigation.navigate('Video');
                        }}
                    />
                     <TabBar.Item
                        icon={ require('../../static/imgs/pic.png')}
                        selectedIcon={require('../../static/imgs/pic.png')}
                        title="图吧"
                        key="Picture"
                        selected={this.state.selectedTab === 'Picture'}
                        onPress={() => {
                            this.props.navigation.navigate('Picture');
                        }}
                    />
                    <TabBar.Item
                        icon={require('../../static/imgs/article.png')}
                        selectedIcon={ require('../../static/imgs/article.png')}
                        title="文章"
                        key="Article"
                        selected={this.state.selectedTab === 'Article'}
                        onPress={() => {
                            this.props.navigation.navigate('Article');
                        }}
                    />
                   
                    <TabBar.Item
                        icon={require('../../static/imgs/about.png')}
                        selectedIcon={require('../../static/imgs/about.png')}
                        title="关于"
                        key="About"
                        selected={this.state.selectedTab === 'About'}
                        onPress={() => {
                            this.props.navigation.navigate('About');
                        }}
                    />
                </TabBar>
        );
    }
}

const styles = StyleSheet.create({
    imgsize: {
        width: 22,
        height: 22
    }
  });
